<template>
    <el-dialog
        title="查看"
        :visible="show"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        width="600px"
    >
        <div v-if="reset" v-loading="loading">
            <el-form :model="formData">
<#list table.fields as field>
<#if field.keyFlag>
<#else>
                <el-form-item label="${field.comment!field.propertyName}：" label-width="100px">{{formData.${field.propertyName}}}</el-form-item>
</#if>
</#list>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel" size="small">关闭</el-button>
        </div>
    </el-dialog>
</template>

${'<script>'}
import ${table.name}_api from '../../api/${table.name}_api'

export default {
    props: {
        show: Boolean,
        cancel: Function,
        id: Number
    },
    data() {
        return {
            reset: true,
            formData: {},
            loading: false
        }
    },
    watch: {
        show(val) {
            if (val) {
                this.reset = false
                this.$nextTick(() => {
                    Object.assign(this.$data, this.$options.data.call(this))
                    this.reset = true
                    this.init && this.init()
                })
            }
        }
    },
    created() {
    },
    methods: {
        init() {
            this.loading = true
            ${table.name}_api.get(this.id).then(data => {
                this.formData = data
                this.loading = false
            }).catch(err => {
                this.$message.error(err.message)
                this.loading = false
            })
        },
        handleCancel() {
            this.cancel()
        }
    }
}

${'</script>'}

<style scoped>
</style>
